<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet"  href="css/swiper.min.css">
    <link rel="stylesheet"  href="css/fudong.css">
</head>
<body>

<div  class="head">

</div>

<div  id="hucontain">

   <div class="fudongd"></div>

    <div class="hulunbo">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                 <img  v-for="item  in lunbos "  class="swiper-slide"  :src="item.src"  />
            </div>
    <!--分页器-->
            <div class="swiper-pagination"></div>

        </div>

        <!--<div class="baoming">-->
            <!--<div><img  :src="" /></div>-->
            <!--<div>课程费用计算</div>-->
            <!--<div><img  :src="" /></div>-->
            <!--<div><img  :src="" /></div>-->
        <!--</div>-->
</div>


    <div  class="huzuixinkaiban">
      <div>
        <div>最新开班课程</div>
        <div>
            <div v-for="item  in  zinkecheng"><img  :src="item.src" /><div  class="kechneg">{{item.miao}}</div></div>
        </div>
    </div>
    </div>

<!--热点活动-->
    <div class="huredian">
        <div>
        <div>
            <div>热点关注</div><div>
            <div class="swiper-container2" id="redian">
                <div class="swiper-wrapper" >
                    <div class="swiper-slide"  v-for="item  in redianlunbo " > <p>{{item.miao}}</p> <img class="swiper-slide"  :src="item.src"  /> <div class="mengceng"></div> </div>
                </div>
                <!-- 如果需要导航按钮 -->

            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        </div>
        <div><div><img  :src="redianimg" /></div><div>{{miaoshu}}</div></div>
        <div><div>热点活动</div><div><img  :src="rehuodongimg" /></div><div><ul><li v-for="item in rehuodong">{{item}}</li></ul></div></div>
        </div>
    </div>

     <!--热门课程-->
      <div class="huwang"><img :src="huwangluoimg"  /></div>

    <!--热门课程内容-->

    <div class="huwangluo">
        <div  class="huwangluomain">
             <div>
                 <div>热门课程</div>
                 <div>
                     <div><img  :src="kecheng" /> </div>

                     <div><img v-for="(item,index) in kechengs"  :src="item" /></div>

                 </div>
             </div>

            <div>
                <div>热门咨询</div>
                <div> <div v-for="item  in  remenzixun">{{item}}</div></div>
                <div>
                    <div>
                        <div><div>精选宝库</div><div>更多>></div></div>
                        <div></div>
                        <div><ul><li v-for="item in  webbaokus">{{item}}</li></ul></div>
                    </div>
                    <div>
                        <div><div>最新试卷</div><div>更多>></div></div>
                        <div></div>
                        <div><ul><li v-for="item in  webshijuans">{{item}}</li></ul></div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="huteachers">
        <div class="huteachersmain">
            <div><img  :src="webteacher.src" />
                <div>
                 <div>{{webteacher.name}}</div>
                  <div>{{webteacher.zhicheng}}</div>
                  <div>{{webteacher.miaoshu}}</div>
            </div></div>
            <div>
                <div  :class="index==indextea?'achover':''"    @click="clickteacher(index)"   v-for="(item,index) in  webteachers">
                    <div><img :src="item.src" /></div>
                    <div><div>{{item.name}}</div><div>{{item.zhicheng}}</div></div>
                </div>

            </div>

        </div>
    </div>
</div>

<div  class="dibussss"></div>
</body>
<script  src="js/jquery.3.3.1.min.js"></script>
<script src="js/swiper.min.js"></script>
<script  src="js/vue.js"></script>
<script  type="text/javascript">

  $(document).ready(function () {
      $(".head").load("head.html")
      $(".fudongd").load("fudong.html")
     $(".dibussss").load("dibu.html")
  })

    window.onload = function() {
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay:true,

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        });

        var mySwiper1 = new Swiper ('.swiper-container2', {
            direction: 'vertical', // 垂直切换选项
            slidesPerView : 2,   // 设置每个模块数量
            spaceBetween : 10, //设置间距
           autoplay:true,
            loop:true,
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            loop: true, // 循环模式选项
        });

    }

    new Vue({
        el:"#hucontain",
        data:{
            indextea:0,
            indexs:0,
            lunbos:[{src:"http://bzt.cybwnt.com/uploads/zhongxue/webbanner.png"},{src:"http://bzt.cybwnt.com/uploads/zhongxue/webbanner.png"},{src:"http://bzt.cybwnt.com/uploads/zhongxue/webbanner.png"}],
            zinkecheng:[{src:"http://bzt.cybwnt.com/uploads/zhongxue/webzxkc.png",miao:"【2019暑】四年级趣味语文入门精选课程" },
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/webzxkc.png",miao:"【2019暑】四年级趣味语文入门精选课程" },
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/webzxkc.png",miao:"【2019暑】四年级趣味语文入门精选课程" },
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/webzxkc.png",miao:"【2019暑】四年级趣味语文入门精选课程" },
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/webzxkc.png",miao:"【2019暑】四年级趣味语文入门精选课程" }
            ],

            redianlunbo:[{src:"http://bzt.cybwnt.com/uploads/zhongxue/webshijuan.png",miao:"初中物理期中考试卷" },
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/webshijuan.png",miao:"初中物理期中考试卷" },
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/webshijuan.png",miao:"初中物理期中考试卷" },
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/webshijuan.png",miao:"初中物理期中考试卷" },
                {src:"http://bzt.cybwnt.com/uploads/zhongxue/webshijuan.png",miao:"初中物理期中考试卷" }
            ],
            redianimg:"http://bzt.cybwnt.com/uploads/zhongxue/webredian.png",
            miaoshu:"博知堂培训学校（博识教育）成立于2008年，主要从事中小学生文化课培训。学校依托独创，高效的系列教学法，使中小学学生在短期内成绩大幅度提高一举成名。我们秉承“勤思创新，执着追求，止于至善”的校训，依托强大的教学团队，坚持教，学，研相结合，建立起了一套集课程辅导，心理咨询......\n",
            rehuodongimg:"http://bzt.cybwnt.com/uploads/zhongxue/webrehuodong.png",
            rehuodong:["博知堂教育，做中国教育界的先锋者...","博知堂教育，做中国教育界的先锋者...","博知堂教育，做中国教育界的先锋者...","博知堂教育，做中国教育界的先锋者...","博知堂教育，做中国教育界的先锋者...","博知堂教育，做中国教育界的先锋者...","博知堂教育，做中国教育界的先锋者..."],
            huwangluoimg:"http://bzt.cybwnt.com/uploads/zhongxue/webwangluojiao.png",
            kecheng:"http://bzt.cybwnt.com/uploads/zhongxue/webkecheng.png",
            kechengs:["http://bzt.cybwnt.com/uploads/zhongxue/webkecheng.png","http://bzt.cybwnt.com/uploads/zhongxue/webkecheng.png"],
            remenzixun:["暑假冲刺班","暑假冲刺班","暑假冲刺班","暑假冲刺班","暑假冲刺班","暑假冲刺班","暑假冲刺班","暑假冲刺班","暑假冲刺班","暑假冲刺班","暑假冲刺班","暑假冲刺班"],
            webbaokus:["2019年暑小学四年级半期测试卷精选...","2019年暑小学四年级半期测试卷精选...","2019年暑小学四年级半期测试卷精选...","2019年暑小学四年级半期测试卷精选...","2019年暑小学四年级半期测试卷精选..."],
            webshijuans:["2019年暑小学四年级半期测试卷精选...","2019年暑小学四年级半期测试卷精选...","2019年暑小学四年级半期测试卷精选...","2019年暑小学四年级半期测试卷精选...","2019年暑小学四年级半期测试卷精选..."],
            webkechnegs:[{src:"http://bzt.cybwnt.com/uploads/zhongxue/webjingxuan.png",name:"精选课程"},{src:"http://bzt.cybwnt.com/uploads/zhongxue/webtigaos.png",name:"提高课程"},{src:"http://bzt.cybwnt.com/uploads/zhongxue/webjixun.png",name:"竞赛课程"},{src:"http://bzt.cybwnt.com/uploads/zhongxue/webjixun.png",name:"集训课程"}],
            webteacher:{src:"http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",name:"陈飞宇",zhicheng:"博知堂高级教师",miaoshu:"从事数学教学多年，功底扎实，逻辑思维严密，重点突出热爱。教育，风趣幽默的教学方式改变枯燥的数学形象，丰富的教学经验让课堂更加精准有效，快速提分重塑学生对数学的兴趣，让学生在快乐中学习，在学习中感受快乐。"},
            webteachers:[{src:"http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",name:"陈飞宇",zhicheng:"博知堂高级教师"},{src:"http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",name:"陈飞宇",zhicheng:"博知堂高级教师"},{src:"http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",name:"陈飞宇",zhicheng:"博知堂高级教师"},{src:"http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",name:"陈飞宇",zhicheng:"博知堂高级教师"}],

        },
        methods:{

        // 点击老师图片
            clickteacher:function (index) {
            this.indextea=index
            }

        },



    })


</script>
</html>